<template>
  <van-cell class="my-cell" :border="false">
    <template #icon>
      <i v-if="isShowIcon" class="iconfont">{{ icon }}</i>
    </template>
    <template #title>
      <span>{{ title }}</span>
    </template>
    <template #default>
      <img v-if="avatar" :src="avatar" alt="" />
      <span v-else>{{ content }}</span>
    </template>
    <template #right-icon>
      <i class="iconfont iconfont-arrow">&#xe653;</i>
    </template>
  </van-cell>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps({
  isShowIcon: {
    type: Boolean,
    default: true
  },
  icon: {
    type: String
  },
  title: {
    type: String,
    required: true
  },
  avatar: {
    type: String
  },
  content: {
    type: [String, Number]
  }
})
</script>

<style lang="less" scoped>
.my-cell {
  align-items: center;
  .iconfont {
    font-size: 20px;
    margin-right: 12px;
  }
  .iconfont-arrow {
    font-size: 14px;
    margin-left: 12px;
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
